<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>实时轨迹(路书)</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map_canvas {
            width: 100%;
            height: 100%;
        }

        #result {
            width: 100%
        }
    </style>
    <script src="//api.map.baidu.com/api?v=2.0&ak=2KrGibP5ES5RSW38Rq3O0w01u5vUncXQ"></script>
    <script src="./lushu.js"></script>
    <script src="./vue.min.js"></script>
    <script src="./jquery.min.js"></script>

</head>

<body id="body1">
    <div id="map_canvas"></div>
    <div id="result"></div>
    <button id="run">开始</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>
    <button id="hide">隐藏信息窗口</button>
    <button id="show">展示信息窗口</button>
    <script>
        var marker;
        var map = new BMap.Map('map_canvas');
        map.enableScrollWheelZoom();
        map.centerAndZoom();
        var url = "ws://127.0.0.1:2020";
        var ws = null;
        var carMaster = true;
        var dataVue = new Vue({
            el: 'body1',
            //数据
            data: {
                //校车信息
                CarInfo: [
                    //1
                    {
                        //移动坐标数组
                        MovePointArry: [
                            {
                                startPot: {
                                    lng: 0,
                                    lat: 0
                                },
                                endPort: {
                                    lng: 0,
                                    lat: 0
                                }
                            }
                        ],
                        //校车编号
                        CarId: 1,
                        //路书对象
                        lushu: null,
                        //坐标数组 包含开始结束
                        PointArry: {
                            startPot: {
                                lng: 0,
                                lat: 0
                            },
                        },
                        //113.893718,22.560856
                        lat: 22.560856,
                        lng: 113.893718
                    },
                    //2
                    {
                        //移动坐标数组
                        MovePointArry: [
                            {
                                startPot: {
                                    lng: 0,
                                    lat: 0
                                },
                                endPort: {
                                    lng: 0,
                                    lat: 0
                                }
                            }
                        ],
                        //校车编号
                        CarId: 2,
                        //路书对象
                        lushu: null,
                        //坐标数组 包含开始结束
                        PointArry: {
                            startPot: {
                                lng: 0,
                                lat: 0
                            },
                        },
                        //113.887753,22.56653
                        lat: 22.56653,
                        lng: 113.887753
                    },
                    //3
                    {
                        //移动坐标数组
                        MovePointArry: [
                            {
                                startPot: {
                                    lng: 0,
                                    lat: 0
                                },
                                endPort: {
                                    lng: 0,
                                    lat: 0
                                }
                            }
                        ],
                        //校车编号
                        CarId: 3,
                        //路书对象
                        lushu: null,
                        //坐标数组 包含开始结束
                        PointArry: {
                            startPot: {
                                lng: 0,
                                lat: 0
                            },
                        },
                        //113.87816,22.559922
                        lat: 22.559922,
                        lng: 113.87816
                    },
                    //4
                    {
                        //移动坐标数组
                        MovePointArry: [
                            {
                                startPot: {
                                    lng: 0,
                                    lat: 0
                                },
                                endPort: {
                                    lng: 0,
                                    lat: 0
                                }
                            }
                        ],
                        //校车编号
                        CarId: 4,
                        //路书对象
                        lushu: null,
                        //坐标数组 包含开始结束
                        PointArry: {
                            startPot: {
                                lng: 0,
                                lat: 0
                            },
                        },
                        //113.88416,22.561791
                        lat: 22.561791,
                        lng: 113.88416
                    },
                    //5
                    {
                        //移动坐标数组
                        MovePointArry: [
                            {
                                startPot: {
                                    lng: 0,
                                    lat: 0
                                },
                                endPort: {
                                    lng: 0,
                                    lat: 0
                                }
                            }
                        ],
                        //校车编号
                        CarId: 5,
                        //路书对象
                        lushu: null,
                        //坐标数组 包含开始结束
                        PointArry: {
                            startPot: {
                                lng: 0,
                                lat: 0
                            },

                        },
                        //113.888688,22.55318
                        lat: 22.55318,
                        lng: 113.888688
                    }
                ]

            },
            //方法
            methods: {
                //初始化小车
                InitCar() {
                    this.CarInfo.forEach(function (item, index) {
                        debugger;
                        console.log(item);
                        var p = new BMap.Point(item.lng, item.lat);
                        console.log(item.PointArry)
                        item.PointArry.startPot.lng = item.lng;
                        item.PointArry.startPot.lat = item.lat;
                        var arrPois = [];
                        var photo = "http://122.51.227.164:9000/myphone/offcar.png";
                        arrPois = arrPois.concat(p); // 用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
                        if (carMaster) { // 选择多车时的主视野车
                            map.setViewport(arrPois);//根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
                        }
                        item.lushu = new BMapLib.LuShu(map, arrPois, { // 创建路数实体
                            // defaultContent: position.carNo,//展示车牌号
                            moreCarMessage: "",// 自定义展示窗口，用于展示车辆详细信息
                            autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                            icon: new BMap.Icon(photo, new BMap.Size(33, 16), { anchor: new BMap.Size(16, 8) }),
                            speed: 100,// 车辆移动速度
                            enableRotation: true,//是否设置marker随着道路的走向进行旋转
                            landmarkPois: []
                        });
                        // makeMoreCarMessageHtml(position,newlushu);// 添加自定义展示窗口信息，由于异步，只能通过函数调用
                        item.lushu.start();// 路数实体开始移动
                    });
                },
                //移动小车
                //CarId 唯一标识
                // Point 经纬度
                MoveCar(CarId, EndPoint) {
                    this.CarInfo.forEach(function (item, index) {
                        if (item.CarId === CarId) {
                            var p1 = new BMap.Point(item.PointArry.startPot.lng, item.PointArry.startPot.lat); // 起始坐标
                            var p2 = new BMap.Point(EndPoint.lng, EndPoint.lat); // 目标坐标
                            if (!item.lushu.getMoving()) {
                                var arrPois = [];
                                arrPois.push(p1);
                                arrPois.push(p2);
                                item.lushu.goPath(arrPois);
                                //调换一下下一个开始起点位置
                                item.PointArry.startPot.lng = EndPoint.lng;
                                item.PointArry.startPot.lat = EndPoint.lat;
                            } else {
                                debugger
                                var result1 = EndPoint.lng;
                                var result2 = EndPoint.lat;
                                var s = { startPot: item.PointArry.startPot, endPort: { lng: result1, lat: result2 } };
                                item.MovePointArry.push(s)
                                // item.MovePointArry.push(item.PointArry);//添加到数组中去
                            }
                        }
                    });
                },
                //webSocker方法
                WebSocketStart() {
                    if ("WebSocket" in window) {
                        ws = new WebSocket(url);
                    } else if ("MozWebSocket" in window) {
                        ws = new MozWebSocket(url);
                    } else {
                        alert("不支持webSocket");
                    }
                    ws.onopen = function () {
                        console.log("open");
                    }
                    ws.onclose = function () {
                        console.log("close");
                    }
                    ws.onerror = function () {
                        console.log("error");
                    }
                    ws.onmessage = function (msg) {

                        if (msg.data instanceof Blob) {
                            //服务器端发送的是BinaryMessage
                            // document.getElementById("message_output").innerHTML += msg.data + "<br/>";
                            console.log(msg.data);
                            var reader = new FileReader();
                            reader.onload = function (event) {
                                var content = reader.result;//内容就在这里
                                // document.getElementById("message_output").innerHTML += content + "<br/>";
                            };
                            var data = reader.readAsText(msg.data);
                        } else {
                            debugger
                            //string类型
                            var result = JSON.parse(msg.data);
                            dataVue.MoveCar(result.CarId, result.Point);
                        }
                    }
                },
                //定时器移动小车
                TimerMoveCar() {
                    debugger
                    console.log("111");
                    this.CarInfo.forEach(function (item, index) {
                        debugger
                        if (item.lushu != null) {
                            if (!item.lushu.getMoving())//是否在移动
                            {
                                while (item.MovePointArry.length != 0)//不为0就一直调用
                                {
                                    var p1 = new BMap.Point(item.MovePointArry[0].startPot.lng, item.MovePointArry[0].startPot.lat); // 起始坐标
                                    var p2 = new BMap.Point(item.MovePointArry[0].endPort.lng, item.MovePointArry[0].endPort.lat); // 目标坐标
                                    var arrPois = [];
                                    arrPois.push(p1);
                                    arrPois.push(p2);
                                    item.lushu.goPath(arrPois);
                                    item.MovePointArry.shift();
                                    break;
                                }
                            }
                        }
                    })
                },
                // Gg()
                // {
                //     setInterval(this.TimerMoveCar(), 1000);
                // }
            },
            created() {
                this.WebSocketStart();

            },
            mounted() {
                this.InitCar();
                // this.Gg();
                this.TimerMoveCar();
                setInterval(this.TimerMoveCar,1000);
                
            },
        })

        // setInterval(TimerMoveCar2(), 100);
        // function TimerMoveCar2() {
        //     debugger
        //     dataVue.CarInfo.forEach(function (item, index) {
        //         debugger
        //         if (item.lushu != null) {
        //             if (!item.lushu.getMoving())//是否在移动
        //             {
        //                 while (item.MovePointArry.length != 0 && item.MovePointArry[0].startPot.lng!=0)//不为0就一直调用
        //                 {
        //                     debugger
        //                     var p1 = new BMap.Point(item.MovePointArry[0].startPot.lng, item.MovePointArry[0].startPot.lat); // 起始坐标
        //                     var p2 = new BMap.Point(item.MovePointArry[0].endPort.lng, item.MovePointArry[0].endPort.lat); // 目标坐标
        //                     var arrPois = [];
        //                     arrPois.push(p1);
        //                     arrPois.push(p2);
        //                     item.lushu.goPath(arrPois);
        //                     item.MovePointArry.shift();
        //                     break;
        //                 }
        //             }
        //         }
        //     })
        // }
        // var marker;
        // var map = new BMap.Map('map_canvas');
        // map.enableScrollWheelZoom();
        // map.centerAndZoom();
        // var url = "ws://127.0.0.1:2020";
        // var ws = null;
        // var lushu2;
        // var carMaster = true;
        // //后台转过来的数据判断是否上个经纬度走完没有就把数据存放到数组中
        // var MovePointArry = [];
        // //通讯连接
        // function onLoaded() {
        //     if ("WebSocket" in window) {
        //         ws = new WebSocket(url);
        //     } else if ("MozWebSocket" in window) {
        //         ws = new MozWebSocket(url);
        //     } else {
        //     }

        //     ws.onopen = function () {
        //     }
        //     ws.onclose = function () {
        //     }

        //     ws.onerror = function () {
        //     }
        //     ws.onmessage = function (msg) {

        //         // if (msg.data instanceof Blob) {
        //         //     //服务器端发送的是BinaryMessage
        //         //     // document.getElementById("message_output").innerHTML += msg.data + "<br/>";
        //         //     console.log(msg.data);
        //         //     var reader = new FileReader();
        //         //     reader.onload = function (event) {
        //         //         var content = reader.result;//内容就在这里
        //         //         document.getElementById("message_output").innerHTML += content + "<br/>";
        //         //     };
        //         //     var data = reader.readAsText(msg.data);
        //         // } else {
        //         //     // console.log(msg.data);
        //         //     var result = makeLuShu(lushu2, JSON.parse(msg.data), carMaster);
        //         //     if (result != null) {
        //         //         lushu2 = result
        //         //     };

        //         // }
        //     }

        // }
        // setInterval(IsMoveIng, 100);
        // function IsMoveIng() {
        //     // debugger

        //     debugger
        //     if (lushu2 != null) {
        //         if (!lushu2.getMoving())//是否在移动
        //         {
        //             while (MovePointArry.length != 0)//不为0就一直调用
        //             {

        //                 var p1 = new BMap.Point(MovePointArry[0].startPot.lng, MovePointArry[0].startPot.lat); // 起始坐标
        //                 var p2 = new BMap.Point(MovePointArry[0].endPot.lng, MovePointArry[0].endPot.lat); // 目标坐标
        //                 var arrPois = [];
        //                 arrPois.push(p1);
        //                 arrPois.push(p2);
        //                 lushu2.goPath(arrPois);
        //                 MovePointArry.shift();
        //                 break;
        //             }

        //         }
        //     }
        // }
        // function makeLuShu(carlushu, position, carMaster) {
        //     debugger
        //     // var driving = new BMap.DrivingRoute(map);     //路书驾车实例
        //     // 具有起始坐标和目标坐标
        //     if (position.startPot.lat != null && position.endPot.lat != null) {
        //         // 用于判断车辆是否离线
        //         // if (position.oldendPot.lat != position.endPot.lat) {
        //         var p1 = new BMap.Point(position.startPot.lng, position.startPot.lat); // 起始坐标
        //         var p2 = new BMap.Point(position.endPot.lng, position.endPot.lat); // 目标坐标
        //         // var distance = map.getDistance(p1, p2); //两点之间的距离，返回两点之间的距离，单位是米
        //         if (!carlushu.getMoving()) {// carlushu是传入的之前保存的路书实体，用于车辆在地图上持续顺滑移动
        //             var arrPois = [];
        //             arrPois.push(p1);
        //             arrPois.push(p2);
        //             carlushu.goPath(arrPois); // 设置小车持续移动的坐标点，形成平滑的路径
        //             // MarkInfoWindows(carlushu);


        //         } else {
        //             debugger
        //             MovePointArry.push(position);//添加到数组中去
        //         }
        //         // });
        //         return null;
        //     }
        //     // }
        //     // // 车辆已离线，且只会触发一次
        //     // else {
        //     //     if (position.isonline) {
        //     //         alert(position.carNo + "已离线");
        //     //         // 关键代码，模拟车辆从离线变为在线
        //     //         carlushu._marker.setIcon(new BMap.Icon("http://122.51.227.164:9000/myphone/mms.png", new BMap.Size(37, 50), { anchor: new BMap.Size(18, 25) }));
        //     //         carlushu._marer.setRotation(carlushu._marker.getRotation());
        //     //         position.isonline = false;
        //     //     }
        //     // }
        //     // return null;
        //     // }

        //     // 只有起始坐标(只有首次点击车辆才会执行)
        //     else if (position.startPot.lat != null && position.endPot.lat == null) {
        //         var p = new BMap.Point(position.startPot.lng, position.startPot.lat);
        //         var arrPois = [];
        //         var photo = "https://developer.baidu.com/map/jsdemo/img/car.png";
        //         arrPois = arrPois.concat(p); // 用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
        //         if (carMaster) { // 选择多车时的主视野车
        //             map.setViewport(arrPois);//根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
        //         }
        //         if (position.isonline) {
        //             photo = 'http://122.51.227.164:9000/myphone/car.png';
        //         }
        //         var newlushu = new BMapLib.LuShu(map, arrPois, { // 创建路数实体
        //             defaultContent: position.carNo,//展示车牌号
        //             moreCarMessage: "",// 自定义展示窗口，用于展示车辆详细信息
        //             autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        //             icon: new BMap.Icon(photo, new BMap.Size(33, 16), { anchor: new BMap.Size(16, 8) }),
        //             speed: 100,// 车辆移动速度
        //             enableRotation: true,//是否设置marker随着道路的走向进行旋转
        //             landmarkPois: []
        //         });
        //         // makeMoreCarMessageHtml(position,newlushu);// 添加自定义展示窗口信息，由于异步，只能通过函数调用
        //         newlushu.start();// 路数实体开始移动


        //         //添加路书点击事件
        //         map.addEventListener('click', startlushu);
        //         function startlushu(e) {
        //             if (!!e.overlay) {// 地图上的覆盖物
        //                 var markerId = newlushu._marker.ba;// 路数实体的在地图上的唯一标识
        //                 if (e.overlay.ba == markerId) {
        //                     // newlushu._overlay._div2.style.display = "block"; // 打开自定义详细信息窗口
        //                     newlushu._overlay._div.style.background = "#F40";
        //                     newlushu._overlay._div.style.color = "#FFF";
        //                     // newlushu._overlay._div.style.background = "pink";
        //                     // newlushu._overlay._div.style.border = "1pxsolidred";
        //                     // newlushu._overlay._div.style.width = "500px";
        //                     // newlushu._overlay._div.style.height = "500px";
        //                     // newlushu._overlay._div.innerHTML = "您好!";
        //                     // newlushu._overlay._div.createElement = "<button>";
        //                     // //添加text ，存放指标权重  
        //                     // var input = document.createElement("input");
        //                     // input.setAttribute('type', 'button');
        //                     // input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型  
        //                     // input.value = "chick me",
        //                     // input.setAttribute("onclick", "alert(this.value)");
        //                     // newlushu._overlay._div.appendChild(input);
        //                     // newlushu._overlay._div.appendChild(input);

        //                     // newlushu._overlay._div.style.display = "none"
        //                 }
        //             }
        //         }
        //         return newlushu;
        //     }


        // }

        // function MarkInfoWindows(lushu) {
        //     var div = document.createElement("div");
        //     div.style.background = "pink";
        //     div.style.border = "1pxsolidred";
        //     div.style.width = "50px";
        //     div.style.height = "50px";
        //     div.style.display = "none"
        //     div.innerHTML = "您好!";
        //     document.body.appendChild(div);
        //     lushu._overlay._div2 = div; // 
        // }

        // function list() {
        //     alert("1111");
        // }

    </script>
</body>

</html>